<script setup lang="ts">
import { ref } from 'vue'
import type { FillOneForm } from '@/types/member'
import { onShow } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
import dayjs from 'dayjs'

interface IEmits {
  (e: 'nextStep', value: { data: FillOneForm; step: number }): void
}
const emits = defineEmits<IEmits>()

const formRef = ref()
const dataForm = ref<FillOneForm>({
  name: '',
  sex: '',
  pid: '',
  birthday: '',
  tel: '',
})

const rules = ref({
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['change', 'blur'],
    },
    {
      type: 'string',
      pattern: '^[\\u4e00-\\u9fa5]{2,15}$',
      required: true,
      message: '姓名不正确',
      trigger: ['blur', 'change'],
    },
  ],
  sex: {
    type: 'string',
    max: 1,
    required: true,
    message: '请选择男或女',
    trigger: ['blur', 'change'],
  },
  pid: [
    {
      required: true,
      message: '请输入身份证号码',
      trigger: ['change', 'blur'],
    },
    {
      type: 'string',
      pattern:
        '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
      required: true,
      message: '身份证号码不正确',
      trigger: ['blur', 'change'],
    },
  ],
  tel: [
    {
      required: true,
      message: '请输入手机号码',
      trigger: ['change', 'blur'],
    },
    {
      type: 'string',
      pattern: '^1[0-9]{10}$',
      required: true,
      message: '手机号码不正确',
      trigger: ['blur', 'change'],
    },
  ],
  birthday: {
    type: 'string',
    required: true,
    message: '请选择出生日期',
    trigger: ['blur', 'change'],
  },
})

const labelStyle = {
  color: '#2074fd',
  'font-weight': 'bold',
}

const iconStyle = {
  color: '#0764FD',
  'font-size': '34rpx',
  'margin-top': '3rpx',
}

const showSexPicker = ref(false)
const sexColumn = [['男', '女']]
const confirmSex = (arr: any) => {
  dataForm.value.sex = arr.value[0]
  showSexPicker.value = false
}

const showDatetime = ref(false)
const confirmDatetime = (date: any) => {
  dataForm.value.birthday = dayjs(date.value).format('YYYY-MM-DD')
  console.log(dataForm.value.birthday)
  showDatetime.value = false
}

const nextHandle = () => {
  formRef.value.validate().then(() => {
    emits('nextStep', { data: dataForm.value, step: 1 })
  })
}

//处理识别身份证成功的回调
const scanIdcardFront = (res: any) => {
  console.log(res)
}

onShow(() => {
  const memberStore = useMemberStore()
  if (!memberStore.fullForm) {
    return
  }
  const { fullForm } = memberStore
  dataForm.value = { ...fullForm }
})
</script>

<template>
  <view class="info-1-container">
    <text class="title">填写个人基本信息</text>
    <text class="desc">填写如下信息，以帮助医生了解您的身体基本情况，方便问诊开药</text>
    <u-form
      labelPosition="top"
      :model="dataForm"
      :rules="rules"
      ref="formRef"
      labelWidth="110"
      :labelStyle="labelStyle"
    >
      <u-form-item
        label="本人姓名"
        prop="name"
        borderBottom
        ref="name"
        leftIcon="account"
        :leftIconStyle="iconStyle"
        required
      >
        <u-input
          v-model="dataForm.name"
          placeholder="输入姓名"
          border="none"
          :customStyle="{ zIndex: 1 }"
        />
      </u-form-item>
      <u-form-item
        label="性别"
        prop="sex"
        borderBottom
        ref="sex"
        @click="showSexPicker = true"
        leftIcon="man"
        :leftIconStyle="iconStyle"
        required
      >
        <u-input
          v-model="dataForm.sex"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择性别"
          border="none"
        ></u-input>
        <u-picker
          :show="showSexPicker"
          :columns="sexColumn"
          @confirm="confirmSex"
          @cancel="showSexPicker = false"
        ></u-picker>
        <template #right><u-icon name="arrow-right"></u-icon></template>
      </u-form-item>
      <u-form-item
        label="身份证号"
        prop="pid"
        borderBottom
        ref="sex"
        leftIcon="file-text"
        :leftIconStyle="iconStyle"
        required
        @click.stop="() => {}"
      >
        <u-input v-model="dataForm.pid" border="none" placeholder="输入身份证号码" />
        <template #right> </template>
      </u-form-item>
      <u-form-item
        label="手机号码"
        prop="tel"
        borderBottom
        ref="tel"
        leftIcon="phone"
        :leftIconStyle="iconStyle"
        required
      >
        <u-input v-model="dataForm.tel" border="none" placeholder="输入手机号码" />
      </u-form-item>
      <u-form-item
        label="出生日期"
        prop="birthday"
        borderBottom
        ref="birthday"
        @click="showDatetime = true"
        leftIcon="calendar"
        :leftIconStyle="iconStyle"
        required
      >
        <u-input
          v-model="dataForm.birthday"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择您的生日"
          border="none"
        ></u-input>
        <u-datetime-picker
          :show="showDatetime"
          mode="date"
          minDate="1920-01-01"
          @confirm="confirmDatetime"
          @cancel="showDatetime = false"
        ></u-datetime-picker>
        <template #right><u-icon name="arrow-right"></u-icon></template>
      </u-form-item>
    </u-form>
    <view class="operate">
      <u-button
        type="primary"
        text="下一步"
        size="large"
        color="#2074fd"
        @click="nextHandle"
      ></u-button>
    </view>
  </view>
</template>

<style lang="less"></style>
